<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ taglib prefix="kfn" uri="http://www.kaifamiao.com/functions" %>


<!DOCTYPE html>

<html>
    <head>
        <title>${ topic.title }</title>
        <link rel="icon" href="${pageContext.request.contextPath}/images/kaifamiao.jpg" type="image/x-icon">
        <link rel="shortcut icon" href="${pageContext.request.contextPath}/images/kaifamiao.jpg" type="image/x-icon" media="screen">
        <%-- 链接外部样式文件(bootstrap样式) --%>
        <link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.css">
        <%-- 链接外部样式文件(font-awesome样式) --%>
        <link rel="stylesheet" href="${pageContext.request.contextPath}/font-awesome/css/font-awesome.css">
        <%-- 链接外部样式文件(Simditor样式) --%>
        <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/simditor/styles/simditor.css" />
        <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/styles/detail.css" />
        <%-- 导入外部JavaScript脚本 --%>
        <script type="text/javascript" src="${pageContext.request.contextPath}/simditor/scripts/jquery.min.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/simditor/scripts/module.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/simditor/scripts/hotkeys.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/simditor/scripts/uploader.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/simditor/scripts/simditor.js"></script>
    </head>
    <body>

        <%-- 利用JSP标准动作实现包含操作 --%>
        <jsp:include page="/WEB-INF/pages/commons/status.jsp"></jsp:include>

        <jsp:include page="/WEB-INF/pages/commons/head.jsp"></jsp:include>

        <div class="container">
            <div class="detail">
                <h4>${ topic.title }</h4>
                <div> 
                    <span> ${ topic.publisher.nickname }</span> 
                    <span> ${ kfn:format( topic.publishTime ) }</span>
                </div>
                <div>${ topic.content }</div>
            </div>
            <%-- 评论区域(发表评论的表单) --%>
            <c:if test="${ not empty customer }">
                <div class="discuss">
                    <form action="/comment/publish" method="post">
                        <input type="hidden" name="topicId" value="${ topic.id }">
                        <textarea name="content" id="comment-editor"></textarea>
                        <div class="buttons">
                            <button type="submit" class="btn btn-primary btn-sm">评论</button>
                        </div>
                    </form>
                </div>
            </c:if>

            <script type="text/javascript">
                let editor = new Simditor({
                    textarea: $('#comment-editor') ,
                    upload: {
                        url: '/image/upload',
                        fileKey: 'upFile'
                    }
                });
            </script>

            <%-- 评论内容(已经发布的评论列表) --%>
            <div class="comment-list">
                <c:forEach items="${ topic.comments }" var="c" varStatus="x">
                    <div class="comment">
                        <div class="title">
                            <span> <i class="fa fa-tag"></i>${ x.count } </span>
                            <span>${ c.publisher.nickname } 发布于 ${ kfn:format( c.publishTime ) }</span>
                            <span>
                                <a href="#">
                                    <i class="fa fa-thumbs-up"></i>
                                    <b>0</b>
                                </a>
                                <a href="#">
                                    <i class="fa fa-thumbs-down"></i>
                                    <b>0</b>
                                </a>
                            </span>
                        </div>
                        <div class="content">${ c.content }</div>
                        <c:if test="${ c.publisher.id == customer.id }" >
                            <div class="operation">
                                <a href="/comment/edit/${c.id}" class="btn btn-sm btn-primary">修改评论</a>
                                <a href="/comment/remove/${c.id}" class="btn btn-sm btn-primary">删除评论</a>
                            </div>
                        </c:if>
                    </div>
                </c:forEach>
            </div>
        </div>

        <jsp:include page="/WEB-INF/pages/commons/foot.jsp"></jsp:include>

    </body>
</html>
